<template>
  <x-dialog
    :title="title"
    :close-on-click-modal="false"
    :show.sync="visible"
    v-if="visible"
    class="supplier-dialog"
    append-to-body
    width="800px"
    :before-close="handleClose"
    @onCancel="handleClose"
    @onSubmit="handleSubmit"
  >
    <x-filter @search="handleSearch" @reset="handleReset" class="dialog-fliter">
      <x-filter-item label="供应商编码">
        <el-input v-model="searchParams.userCode"></el-input>
      </x-filter-item>
      <x-filter-item label="供应商名称">
        <el-input v-model="searchParams.uesrname"></el-input>
      </x-filter-item>
    </x-filter>
    <x-table
      :data-source="tableData"
      size="mini"
      @on-change="handleTableChange"
      @on-selection-change="handleSelectionChange"
      :pagination="pagination"
      :loading="loading"
      :row-key="'id'"
      :height="338"
    >
      <el-table-column v-if="multiple" type="selection" width="60"></el-table-column>
      <el-table-column v-else width="60">
        <template #default="scope">
          <!-- label值要与el-table数据id实现绑定 -->
          <el-radio v-model="checked" :label="scope.row.id" @change="handleRowSelect(scope.row)">{{ '' }}</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="userCode" label="供应商编码"></el-table-column>
      <el-table-column prop="username" label="供应商名称"></el-table-column>
      <el-table-column prop="realName" label="供应商类型"></el-table-column>
    </x-table>
  </x-dialog>
</template>
<script>
  import { TableListMixin, QueryDictMixin, PermissionsMixin } from '@package/utils'
  import { listSupplierUrl as listUrl } from '../api'

  export default {
    components: {},
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    props: {
      multiple: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '供应商选择'
      }
    },
    data() {
      return {
        visible: false,
        searchParams: {},
        listUrl,
        tableData: [],
        checked: null,
        selectData: [] // 选中的数据
      }
    },
    methods: {
      show() {
        this.visible = true
        this.loadData()
      },
      handleSearch(val) {
        this.queryParam = { ...this.searchParams, ...val }
        this.loadData()
      },
      handleReset() {
        this.resetSearch()
      },
      // 多行选中
      handleSelectionChange(rows) {
        this.selectData = rows
      },
      // 单选某行选中
      handleRowSelect(row) {
        this.selectData = [row]
      },
      // 弹窗关闭
      handleClose() {
        this.checked = null
        this.selectData = []
        this.visible = false
      },
      // 弹窗确定
      handleSubmit() {
        if (this.selectData.length) {
          this.$emit('onConfirm', this.selectData)
          this.handleClose()
        } else {
          this.$message.error('请至少选择一条数据点击确定')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .supplier-dialog {
    .dialog-fliter {
      // margin-bottom: 10px;
    }
    .x-table-container {
      height: 380px;
    }
    ::v-deep .x-filter-container {
      background: none;
      box-shadow: none;
      border: none;
    }
    ::v-deep .x-filter-content {
      padding: 0;
    }
  }
</style>
